<template>

    <el-container>
        <el-header style="text-align: center; margin: 15px 0 0 0px;">
            <el-row>
                <el-col :span="24">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">登录页</el-breadcrumb-item>
                        <el-breadcrumb-item><a href="/main/TestExamFenYe">业务管理</a></el-breadcrumb-item>
                        <el-breadcrumb-item>分页查询</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>
            </el-row>
            <h1>职务-人员列表</h1>
        </el-header>
        <!-- el-main 是elementUI的布局容器，用于放置页面的主要内容，
         类似的还有el-container、el-aside、el-footer、el-header -->
        <el-main style=" justify-content: center; align-items: center;">
     <div class="">
        <el-table :data="employeeList" style="width: 82.5vw;">
            <el-table-column prop="employeeId" label="员工ID" width="auto">
            </el-table-column>
            <el-table-column prop="employeeName" label="员工姓名" width="auto">
            </el-table-column>
           
            <el-table-column header-align="center" align="center" prop="positionList" label="职务">
                 <template slot-scope="scope"> 
                    <el-tag type="success" 
                    v-for="(position, index) in scope.row.positionList" :key="index"
                    style="margin-left: 5px;"
                    >
                        {{position.positionName}}
                    </el-tag>
                        
                 </template>
            </el-table-column>
        </el-table>
    </div>
        </el-main>
        <el-footer>

        </el-footer>
    </el-container>
</template>
<script>
export default {
  name: "PositionAndEmployee",
  data() {
    return {
      positionList: [],
      employeeList: [],
      position: {
        positionId: "",
        positionName: "",
        employeeList: [],
      },
      employee: {
        employeeId: "",
        employeeName: "",
        positionList: [],
      },
    };
  },
  mounted: function () {
    this.getPoisitionList();
    this.getEmployeeList();
  },
  methods: {
    getPoisitionList: function () {
      this.$axios
        .post(
          "http://127.0.0.1:8082/positionAndEmployee/postEmployeeByPosition",
          this.position
        )
        .then((response) => {
          console.log("职务列表！！！！", response.data.data);
          this.positionList = response.data.data;
        });
    },
    getEmployeeList: function () {
      this.$axios
        .post(
          "http://127.0.0.1:8082/positionAndEmployee/postPositionByEmployee",
          this.employee
        )
        .then((response) => {
          console.log("人员列表！！！！", response.data.data);
          this.employeeList = response.data.data;
        });
    },
  },
};
</script>
<style scoped>
    
</style>